<template>
  <div class="mainbody_head">
      <div class="left_part">
           <div class="logo">
              <p>政务平台</p>
           </div>
           <div class="tap">
             <div class="tap1">
                 <div style="width: 3vw;height: 2px;background-color: #216DDF;" v-if="isselcted==true" ></div>
                 <div style=" font-family: 'Inter';font-style: normal;font-weight: 400;color: #216DDF;" v-show="isselcted==true" > 对话</div>
                 <div style="font-family: 'Inter';font-style: normal;font-weight: 400;color: black;" v-show="isselcted==false" @click="gotoCommonChat">对话</div>
             </div>
             <div>|</div>
             <div class="tap2">
                 <div style="width: 6vw;height: 2px;background-color: #216DDF;" v-if="isselcted==false" ></div>
                 <div style="color: #216DDF;font-family: 'Inter';font-style: normal;font-weight: 400;" v-show="isselcted==false"> 知识库问答</div>
                 <div style="color: black;font-family: 'Inter';font-style: normal;font-weight: 400;" v-show="isselcted==true" @click="gototest"> 知识库问答</div>
             </div>
           </div>
      </div>
      <div class="right_part">
           <div class="witcher" >
                 <el-switch
                   v-model="value"
                     class="ml-2"
                     inline-prompt
                     size="large"
                     style="--el-switch-on-color: #216DDF; --el-switch-off-color: #216DDF"
                     active-text="普通模式"
                     inactive-text="测试模式"
                     @change="chooseMode"
                   />
           </div>
           <div class="headicon">
               <div style="height: 6vh;width: 6vh;">
                  <img style="width: 100%;height: 90%;border-radius: 50%;" :src="headicon"/>
               </div>
               <div>{{ username }}</div>
           </div>
      </div>
  </div>
</template>

<script>
export default {
name:"Head",
data(){
return {
    value:true,
    isselcted:true,
    mode:"普通模式",
    headicon:"https://img.zcool.cn/community/01116c5afe7689a801209a858a5349.jpg@2o.jpg",
    username:"用户1325",
    sidebarOpen: false,
}
},
methods:{
chooseMode(e){
if(e==true) {
 this.mode="测试模式"
 this.$router.push("/TestChat")
}else {
this.mode="普通模式"
 this.$router.push("/CommontChat")
}
},
gotoCommonChat() {
this.isselcted=true;
console.log(this.isselcted);
this.$router.push("/CommontChat")
},
gototest() {
this.isselcted=false;
console.log(this.isselcted);
this.$router.push("/KBsChat")
}
}
}
</script>

<style>
.container {
width: 100%;     /* 占满浏览器宽度 */
height: 100%;    /* 占满浏览器高度 */
display: flex;
flex-direction: row;
justify-content: center ;
align-items: center;
cursor:default;
caret-color: transparent;
position: relative; /* 设置容器为相对定位，使得内容和侧边栏可以相对定位 */
}
.container .mainbody{
min-width:75vw;
width: auto !important;
height:90vh;
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
} 
.mainbody .mainbody_head {
min-width: 75vw;
width: auto !important;
height: 6vh;
background-color:  #FFFFFF; 
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.mainbody_head .left_part {
min-width: 25vw;
width: auto !important;
height: 6vh;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.left_part .logo {
min-width: 10vw;
width: auto !important;
height: 6vh;
display: flex;
text-align: center;
flex-direction: row;
justify-content:center;
align-items: center;
background-color: aqua;
}

.left_part .tap {
min-width: 12vw;
width: auto !important;
height: 6vh;
display: flex;
text-align: center;
flex-direction: row;
justify-content:space-between;
align-items: center;
}

.tap .tap1 {
min-width: 3vw;
width: auto !important;
height: 6vh;
display: flex;
text-align: center;
flex-direction: column;
justify-content:center;
align-items: center;
}
.tap .tap2 {
min-width: 6vw;
width: auto !important;
height: 6vh;
display: flex;
text-align: center;
flex-direction: column;
justify-content:center;
align-items: center;
}
.mainbody_head .right_part {
min-width: 20vw;
width: auto !important;
height: 6vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}

.right_part .witcher {
min-width: 9vw;
width: auto !important;
height: 6vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}

.right_part .headicon {
min-width: 9vw;
width: auto !important;
height: 6vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.mainbody .mainbody_content {
min-width: 75vw;
width: auto !important;
height: 84vh;
background-color: #E7F1FB;
display: flex;
flex-direction: column;
justify-content: baseline;
align-items: center;
}

</style>